<template>
  <article>
    <div class="item" v-show="!isRoam">
      <div>
        <a-popover placement="top">
          <template #content>
            <div class="item-content">
              <div class="item-content-title">设备台账</div>
              <div class="item-content-body">
                <BookSearchTree @updateCurrent="updateCurrent" />
              </div>
            </div>
          </template>
          <div class="item-label">
            <svg-icon name="home-ledger"></svg-icon>
            设备台账
          </div>
        </a-popover>
      </div>

      <div>
        <a-popover placement="top">
          <template #content>
            <div class="item-content">
              <div class="item-content-title">视频装置</div>
              <div class="item-content-body">
                <a-input
                  v-model:value.trim="cameraValue"
                  placeholder="请输入"
                  v-filter-special-chars
                  class="mb-[0.5rem]"
                >
                  <template #suffix>
                    <SearchOutlined
                      class="ml-2 cursor-pointer"
                      @click="search('camera')"
                    />
                  </template>
                </a-input>
                <div class="common">
                  <div
                    v-for="(item, index) in cameraData"
                    :key="index"
                    class="common-item"
                    @click="handleClickCamera(item)"
                  >
                    {{ index + 1 }}. {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="item-label">
            <svg-icon name="home-video"></svg-icon>
            视频装置
          </div>
        </a-popover>
      </div>

      <div>
        <a-popover placement="top">
          <template #content>
            <div class="item-content">
              <div class="item-content-title">漫游巡视</div>
              <div class="item-content-body">
                <a-input
                  v-model:value.trim="roamValue"
                  placeholder="请输入"
                  v-filter-special-chars
                  class="mb-[0.5rem]"
                >
                  <template #suffix>
                    <SearchOutlined
                      class="ml-2 cursor-pointer"
                      @click="search('roam')"
                    />
                  </template>
                </a-input>
                <div class="common">
                  <div
                    v-for="(item, index) in taskList"
                    :key="index"
                    class="common-item"
                    @click="handleClickRoam(item)"
                  >
                    {{ index + 1 }}. {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="item-label">
            <svg-icon name="home-roam"></svg-icon>
            漫游巡视
          </div>
        </a-popover>
      </div>
    </div>
    <div v-if="isRoam" class="btns">
      <div v-if="isPause" @click="handlePause">
        <svg-icon name="pause-outlined" title="暂停"></svg-icon>
      </div>
      <div v-else @click="handleBegin">
        <svg-icon name="begin-outlined" title="开始"></svg-icon>
      </div>
    </div>
    <div class="home" @click="reset">
      <svg-icon name="home-home"></svg-icon>
    </div>
  </article>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import BookSearchTree from '@/components/tree/BookSearchTree.vue'
import { patrolJobMultiTerminal, cameraList, pointVOList } from './serve.api'

const taskList = ref([])
const cameraData = ref([])

const cameraValue = ref('')
const roamValue = ref('')

const isRoam = ref(false)
const isPause = ref(true)

const emit = defineEmits([])

const reset = () => emit('reset')

function handleClickCamera(item) {
  emit('camera', item)
  emit('close-all-modal')
}

function handleClickRoam(item) {
  pointVOList({ jobId: item.id }).then((res) => {
    emit('roam', res)
    isRoam.value = true
  })
  emit('close-all-modal')
}

const updateCurrent = (item) => {
  emit('device', item)
  emit('close-all-modal')
}

async function search(type) {
  if (type === 'camera') {
    console.log(cameraData.value)
    if (cameraValue.value) {
      cameraData.value = cameraData.value.filter((item) =>
        item.name.includes(cameraValue.value)
      )
    } else {
      cameraData.value = await cameraList()
    }
  }

  if (type === 'roam') {
    console.log(roamValue.value)
    if (roamValue.value) {
      taskList.value = taskList.value.filter((item) =>
        item.name.includes(roamValue.value)
      )
    } else {
      taskList.value = await patrolJobMultiTerminal()
    }
  }
}

function handlePause() {
  emit('pause')
  isPause.value = !isPause.value
}

function handleBegin() {
  emit('begin')
  isPause.value = !isPause.value
}

function roamEnd() {
  isRoam.value = false
  console.log('========Article漫游结束=======')
}

function resetAngle() {
  console.log('重置视场角')
  isRoam.value = false
  isPause.value = true
  emit('close-all-modal')
}

onMounted(async () => {
  taskList.value = await patrolJobMultiTerminal()
  cameraData.value = await cameraList()
})

defineExpose({ roamEnd, resetAngle })
</script>

<style lang="less" scoped>
article {
  position: absolute;
  right: 2rem;
  bottom: 1rem;
  z-index: 1;
  display: flex;

  .item {
    cursor: pointer;
    display: flex;

    > div:not(:first-child) {
      margin-left: 1.5rem;
    }

    &-label {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      font-weight: 800;
      background: rgb(240 240 240);
      border: 0.0625rem solid #fff;
      border-radius: 0.5rem;

      :deep(.svg-icon) {
        margin-right: 0.5rem;
        width: 2rem;
        height: 2rem;
      }

      &:hover {
        color: #fff;
        background-color: #00796a;
        border: 0.0625rem solid #00796a;
      }
    }
  }

  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
    margin-left: 1.5rem;
    width: 5rem;
    height: 5rem;
    background: rgb(240 240 240);
    border: 0.0625rem solid #fff;
    border-radius: 50%;
    cursor: pointer;

    :deep(.svg-icon) {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
}

.btns {
  margin-top: -1em;
  width: 5rem;
  height: 5rem;
  background: rgb(240 240 240);
  border: 0.0625rem solid #fff;
  border-radius: 50%;

  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  &:hover {
    color: #00796a;
    cursor: pointer;
  }

  :deep(.svg-icon) {
    width: 2rem;
    height: 2rem;
  }
}
</style>
